<template>
  <div id="app">
    <div
      v-if="showDebugInfo"
      class="debug-info"
      style="position: fixed; z-index: 999999; width: 100%; color: #999; text-align: center"
    >
      {{
        `${currentTime} ${pixelSize.screen} | ${pixelSize.window} | ${pixelSize.viewport} ${$store.state.user.account} ${VUE_APP_ENV} v${VUE_APP_VERSION}`
      }}
    </div>
    <RouterView />
  </div>
</template>

<script>
import { toDateString } from "xe-utils";
export default {
  name: "App",
  provide() {
    return {
      generateI18nTitle: this.generateI18nTitle,
    };
  },
  data() {
    return {
      VUE_APP_ENV: process.env.VUE_APP_ENV,
      VUE_APP_VERSION: process.env.VUE_APP_VERSION,
      showDebugInfo: !["production", "uat", "test"].includes(process.env.VUE_APP_ENV),
      language: navigator.language || navigator.browserLanguage,
      currentTime: toDateString(new Date(), "yyyyMMdd HHmmss.SSSZ"),
      pixelSize: this.getPixelSize(),
    };
  },
  watch: {
    $route: {
      handler: "routeChange",
      immediate: true,
    },
    "$store.state.keepAlive.list"(val) {
      process.env.NODE_ENV == "development" && console.log(`[ keepAliveList ] ${val}`);
    },
    "$store.state.settings.mode": {
      handler() {
        if (this.$store.state.settings.mode == "pc") {
          this.$store.commit("settings/updateThemeSetting", {
            sidebarCollapse: this.$store.state.settings.sidebarCollapseLastStatus,
          });
        } else if (this.$store.state.settings.mode == "mobile") {
          this.$store.commit("settings/updateThemeSetting", {
            sidebarCollapse: true,
          });
        }
        document.body.setAttribute("data-mode", this.$store.state.settings.mode);
      },
      immediate: true,
    },
    "$store.state.settings.layout": {
      handler() {
        document.body.setAttribute("data-layout", this.$store.state.settings.layout);
      },
      immediate: true,
    },
    "$store.state.settings.theme": {
      handler() {
        document.body.setAttribute("data-theme", this.$store.state.settings.theme);
      },
      immediate: true,
    },
    "$store.state.settings.showHeader": {
      handler() {
        document.body.removeAttribute("data-no-main-sidebar");
        if (
          this.$store.state.settings.showHeader ||
          (this.$store.state.menu.routes.length <= 1 && !this.$store.state.settings.alwaysShowMainSidebar)
        ) {
          document.body.setAttribute("data-no-main-sidebar", "");
        }
      },
      immediate: true,
    },
    "$store.state.menu.routes": {
      handler() {
        document.body.removeAttribute("data-no-main-sidebar");
        if (
          this.$store.state.settings.showHeader ||
          (this.$store.state.menu.routes.length <= 1 && !this.$store.state.settings.alwaysShowMainSidebar)
        ) {
          document.body.setAttribute("data-no-main-sidebar", "");
        }
      },
      immediate: true,
      deep: true,
    },
    "$store.state.settings.sidebarCollapse": {
      handler() {
        document.body.removeAttribute("data-sidebar-no-collapse");
        document.body.removeAttribute("data-sidebar-collapse");
        if (this.$store.state.settings.sidebarCollapse) {
          document.body.setAttribute("data-sidebar-collapse", "");
        } else {
          document.body.setAttribute("data-sidebar-no-collapse", "");
        }
      },
      immediate: true,
    },
  },
  mounted() {
    window.onresize = () => {
      this.$store.commit("settings/setMode", document.body.clientWidth);
      this.pixelSize = this.getPixelSize();
    };
    window.onresize();
  },
  methods: {
    // 路由 title 转国际化，如果没有配置则默认显示 title
    generateI18nTitle(key, defaultTitle) {
      let title;
      if (this.$te(key)) {
        title = this.$t(key);
      } else {
        const index = defaultTitle.indexOf("-");
        if (defaultTitle && index != -1) {
          const title = defaultTitle.slice(0, index);
          const arr = defaultTitle.split(" ");
          if (Array.isArray(arr) && arr.length >= 3 && arr[2]) {
            defaultTitle = `${title}-${arr[2]}`;
          } else {
            defaultTitle = `${title}`;
          }
        }
        title = defaultTitle;
      }
      return title;
    },
    // 监听路由变化，更新页面 title
    routeChange() {
      this.$route.meta.title &&
        this.$store.commit("settings/setTitle", this.generateI18nTitle(this.$route.meta.i18n, this.$route.meta.title));
    },
    getPixelSize() {
      return {
        screen: `${screen.width}x${screen.height}`,
        window: `${window.innerWidth}x${window.innerHeight}`,
        viewport: `${document.documentElement.clientWidth}x${document.documentElement.clientHeight}`,
      };
    },
  },
  metaInfo() {
    return {
      title: this.$store.state.settings.enableDynamicTitle && this.$store.state.settings.title,
      titleTemplate: (title) => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE;
      },
    };
  },
};
</script>

<style scoped>
#app {
  height: 100%;
}
</style>
